<script setup lang="ts">
  import { ref, defineEmits, computed, watch, onMounted } from 'vue';
  import { useBooleanStore } from '@/store';
  import { getUserJob } from '@/utils/auth';
  import { Notification } from '@arco-design/web-vue';
  import {
    searchWmsDelCo,
    updateWmsDeliveryCo,
    deletDto,
  } from '@/api/material-receipt';

  const emit = defineEmits(['updateArray']);
  const booleanStore = useBooleanStore();
  // 表单查询数据
  const scanCode = ref<string>('');
  const person = ref<string>('');
  const startTime = ref<string>('');
  const endTime = ref<string>('');
  const status = ref<string>('');
  const isEff = ref<string>('');
  const itemCode = ref<string>('');

  const pageSize = ref<number>(30);
  const pageNumber = ref<number>(1);
  const barcode = computed(() => {
    try {
      if (scanCode.value.includes('{')) {
        const scanCodeObj: any = JSON.parse(scanCode.value);
        if ('CPHGZ' in scanCodeObj) {
          // 成品
          return scanCodeObj.CPHGZ;
        }
        // 标件
        return scanCodeObj.CKCODE;
      }
      return scanCode.value;
    } catch {
      Notification.error({
        title: '错误',
        content: '请检查输入法是否为英文输入',
      });
      return '';
    }
  });
  // 发送搜索数据
  const flowQueryData = ref({
    searchParams: computed(() => ({
      barcode: barcode.value,
      applyEmpcode: person.value,
      status: status.value,
      isEff: isEff.value,
      itemCode: itemCode.value,
    })),
    pageParameter: computed(() => ({
      rows: pageSize.value,
      page: pageNumber.value,
    })),
    startTime: computed(() => startTime.value),
    endTime: computed(() => endTime.value),
    funcType: '',
  });
  const newData = ref<any>();
  // 表格数据
  async function handleSearch() {
    newData.value = await searchWmsDelCo(flowQueryData.value);
    emit('updateArray', newData.value);
  }
  // 重置
  function reset() {
    scanCode.value = '';
    person.value = '';
    startTime.value = '';
    endTime.value = '';
    status.value = '';
    isEff.value = '';
    itemCode.value = '';
    handleSearch();
  }
  onMounted(() => {
    handleSearch();
  });
  // 获取用户工号
  const getUserJobNumber = ref<any>(getUserJob());
  // 一键提交
  async function submit() {
    if (
      !booleanStore.listFive[0] ||
      booleanStore.listFive[0].value.length === 0
    ) {
      Notification.warning({
        title: '提示',
        content: '请至少选择一条协调单',
        closable: true,
      });
      return;
    }

    // 计算已选择的表格数据
    const selectedTableData = computed(() => {
      return newData.value.responseBody?.result?.filter((item: any) =>
        booleanStore.listFive[0].value.includes(item.wmsDeliveryCoordinateId)
      );
    });

    const info: any = {
      applyEmpcode: getUserJobNumber.value,
      ip: window.location.hostname,
      deliveryCoordinates: selectedTableData.value,
    };
    const data = await updateWmsDeliveryCo(info);
    if (data.retCode === '200') {
      Notification.success({
        title: '成功',
        content: data.message,
        closable: true,
      });
    } else {
      Notification.error({
        title: '失败',
        content: data.message,
        closable: true,
      });
    }
    handleSearch();
    // 清空选择的协调单
    booleanStore.toggleBool4(7);
  }
  // 一键删除
  async function onDel() {
    if (
      !booleanStore.listFive[0] ||
      booleanStore.listFive[0].value.length === 0
    ) {
      Notification.warning({
        title: '提示',
        content: '请至少选择一条协调单',
        closable: true,
      });
      return;
    }
    // 计算已选择的表格数据
    const selectedTableData = computed(() => {
      return newData.value.responseBody?.result?.filter((item: any) =>
        booleanStore.listFive[0].value.includes(item.wmsDeliveryCoordinateId)
      );
    });

    const info: any = {
      applyEmpcode: getUserJobNumber.value,
      data: selectedTableData.value,
    };
    const data = await deletDto(info);
    if (data.retCode === '200') {
      Notification.success({
        title: '成功',
        content: data.message,
        closable: true,
      });
    } else {
      Notification.error({
        title: '失败',
        content: data.message,
        closable: true,
      });
    }
    handleSearch();
    // 清空选择的协调单
    booleanStore.toggleBool4(7);
  }
  // 监听分页
  watch([() => booleanStore.pageNum, () => booleanStore.pageSize], () => {
    if (booleanStore.num5 === 2) {
      pageNumber.value = booleanStore.pageNum;
      pageSize.value = booleanStore.pageSize;
      handleSearch();
    }
  });
  watch(
    () => booleanStore.update,
    () => {
      if (booleanStore.num6 === 1) handleSearch();
    }
  );
</script>

<template>
  <a-row :gutter="{ md: 8, lg: 24, xl: 32 }">
    <a-col :span="6">
      <div>
        <a-input
          v-model="scanCode"
          placeholder="条码"
          size="large"
          allow-clear
          @press-enter="handleSearch"
        />
      </div>
    </a-col>
    <a-col :span="6">
      <div>
        <a-input
          v-model="person"
          placeholder="发起人"
          size="large"
          allow-clear
          @press-enter="handleSearch"
        />
      </div>
    </a-col>
    <a-col :span="6">
      <div>
        <a-date-picker
          v-model="startTime"
          style="width: 100%"
          placeholder="协调发起时间"
          size="large"
          allow-clear
          @press-enter="handleSearch"
        />
      </div>
    </a-col>
    <a-col :span="6">
      <div>
        <a-date-picker
          v-model="endTime"
          style="width: 100%"
          placeholder="到"
          size="large"
          allow-clear
          @press-enter="handleSearch"
        />
      </div>
    </a-col>
  </a-row>

  <a-row class="row-top" :gutter="{ md: 8, lg: 24, xl: 32 }">
    <a-col :span="6">
      <div>
        <a-select
          v-model="status"
          default-value=""
          placeholder="协调单状态"
          size="large"
          allow-clear
        >
          <a-option label="协调中" value="0"></a-option>
          <a-option label="申请归零" value="1"></a-option>
          <a-option label="已归零" value="2"></a-option>
        </a-select>
      </div>
    </a-col>
    <a-col :span="6">
      <div>
        <a-select
          v-model="isEff"
          placeholder="是否有效"
          size="large"
          default-value=""
          allow-clear
        >
          <a-option label="有效" value="1"></a-option>
          <a-option label="无效" value="0"></a-option>
        </a-select>
      </div>
    </a-col>
    <a-col :span="6">
      <div>
        <a-input
          v-model="itemCode"
          placeholder="图号"
          size="large"
          allow-clear
          @press-enter="handleSearch"
        />
      </div>
    </a-col>
  </a-row>

  <div class="btn-group">
    <a-button type="primary" size="large" @click="handleSearch">查询</a-button>
    <a-button class="btn-reset" size="large" @click="reset">重置</a-button>
    <a-button
      type="primary"
      class="btn-reset"
      size="large"
      @click="booleanStore.toggleBool(1)"
      >添加</a-button
    >
    <a-button type="primary" class="btn-reset" size="large" @click="submit"
      >提交</a-button
    >
    <a-button type="primary" class="btn-reset" size="large" @click="onDel"
      >删除</a-button
    >
  </div>
</template>

<style scoped>
  .btn-group {
    float: right;
    margin-top: 15px;
  }

  .btn-reset {
    margin-left: 10px;
  }
  .row-top {
    margin-top: 10px;
  }
</style>
